{% set providerChosen = (data.target == 'gce') ? true : false %}

{% set machines = (data.vm.provider.gce.machines is defined and data.vm.provider.gce.machines)
    ? data.vm.provider.gce.machines : [] %}
{% set syncedFolders = (data.vm.synced_folder is defined and data.vm.synced_folder)
    ? data.vm.synced_folder : [] %}

<div class="container-fluid cm-container-white section-title">
    <div class="checkbox checkbox-lg no-padding">
        <input type="radio" id="vagrantfile-vm-provider-gce-install"
               name="vagrantfile[target]" value="gce"
               {% if providerChosen %}checked{% endif %}
               data-toggle="radio-collapse" data-target="#vagrantfile-gce-container"
               data-enforce-group-single="vagrantfile"
               data-enable-on-check data-disable-on-uncheck />
        <label for="vagrantfile-vm-provider-gce-install">Deploy to Google</label>

        <p>
            A new server will be spun up at Google Compute Engine.
            <a href="#" data-toggle="modal"
               data-target="#vagrantfile-gce-modal">Click here for instructions</a>.
        </p>
    </div>
</div>

<div id="vagrantfile-gce-container"
     class="container-fluid collapse {% if providerChosen %}in{% endif %}">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="form-group col-xs-12">
                <div class="clearfix"><label>Distro</label></div>

                {% for image in data.available.images %}
                    <div class="radio">
                        <input type="radio" id="vagrantfile-vm-provider-gce-image-{{ image.image }}"
                               name="vagrantfile[vm][provider][gce][image]"
                               value="{{ image.image }}"
                               {% if image.image == data.vm.provider.gce.image %}checked{% endif %} />
                        <label for="vagrantfile-vm-provider-gce-image-{{ image.image }}">
                            {{ image.long_name }}
                        </label>
                    </div>
                {% endfor %}
            </div>

            <div class="clearfix"></div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-vm-provider-gce-client_email">
                    Client Email
                </label>
                <input type="text" id="vagrantfile-vm-provider-gce-client_email"
                       name="vagrantfile[vm][provider][gce][client_email]"
                       placeholder="GCE CLIENT EMAIL" class="form-control"
                       value="{{ data.vm.provider.gce.client_email }}" />
                <div class="help-block">
                    The email address provided by your service account.
                </div>
            </div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-vm-provider-gce-key_location">
                    GCE Private Key Location
                </label>
                <input type="text" id="vagrantfile-vm-provider-gce-key_location"
                       name="vagrantfile[vm][provider][gce][key_location]"
                       placeholder="/PATH/TO/PRIVATE_KEY.P12" class="form-control"
                       value="{{ data.vm.provider.gce.key_location }}" />
                <div class="help-block">
                    <p>The path to the service account private
                        <span class="label label-info" data-toggle="help-text">
                            <i class="fa fa-ellipsis-h"></i></span>
                        <span class="hidden">key file.</span>
                    </p>
                    <div class="hidden">
                        <p><strong>Must be absolute path! Cannot use
                                <code>~/.ssh/private_key.p12</code></strong></p>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-ssh-private_key_path">
                    Local Private Key Path
                </label>
                <input type="text" id="vagrantfile-ssh-private_key_path"
                       name="vagrantfile[ssh][private_key_path]"
                       placeholder="~/.ssh/id_rsa" class="form-control"
                       value="{{ data.ssh.private_key_path }}" />
                <div class="help-block">
                    <p>
                        The GCE server will not be accessible without your
                        <span class="label label-info" data-toggle="help-text">
                            <i class="fa fa-ellipsis-h"></i></span>
                        <span class="hidden">private/public key.</span>
                    </p>
                    <div class="hidden">
                        <p><strong>It will not be accessible using username/password,
                                only private key!</strong></p>
                    </div>
                </div>
            </div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-ssh-username">
                    Local Private Key Username
                </label>
                <input type="text" id="vagrantfile-ssh-username"
                       name="vagrantfile[ssh][username]"
                       placeholder="~/.ssh/id_rsa" class="form-control"
                       value="{{ data.ssh.username }}" />
                <div class="help-block">
                    The username associated with the private key entered.
                </div>
            </div>

            <div class="clearfix"></div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-ssh-public_key_path">
                    Local Public Key Path
                </label>
                <input type="text" id="vagrantfile-ssh-public_key_path"
                       name="vagrantfile[ssh][public_key_path]"
                       placeholder="~/.ssh/id_rsa" class="form-control"
                       value="{{ data.ssh.public_key_path }}" />
                <div class="help-block">
                    Your public key is also required.
                </div>
            </div>

            <div class="form-group col-xs-12 col-sm-6">
                <label for="vagrantfile-vm-provider-gce-project_id">
                    Project ID
                </label>
                <input type="text" id="vagrantfile-vm-provider-gce-project_id"
                       name="vagrantfile[vm][provider][gce][project_id]"
                       placeholder="GCE PROJECT ID" class="form-control"
                       value="{{ data.vm.provider.gce.project_id }}" />
                <div class="help-block">
                    The ID of your project.
                </div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Machines</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.vagrantfile_gce.machine') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, machine in machines %}
                    {% set blockId = "vagrantfile-vm-provider-gce-machines-#{index}" %}
                    {% set blockName = "vagrantfile[vm][provider][gce][machines][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a GCE machine
                </div>
                {% for index, machine in machines %}
                    {% include 'PuphpetBundle:vagrantfile-gce:machine.html.twig' with {
                        'machine': machine,
                        'zones': data.available.zones,
                        'machine_types': data.available.machine_types,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="panel panel-primary">
        <div class="panel-heading">Shared Folders</div>
        <div class="panel-body">
            <ul class="nav nav-tabs nested-tabs sortable">
                <li class="add">
                    <a href="{{ path('puphpet.vagrantfile_gce.synced_folder') }}"
                       data-toggle="add-block">
                        <i class="fa fa-plus"></i> Add</a>
                </li>
                {% for index, synced_folder in data.vm.synced_folder %}
                    {% set blockId = "vagrantfile-vm-provider-gce-synced_folder-#{index}" %}
                    {% set blockName = "vagrantfile[vm][provider][gce][synced_folder][#{index}]" %}
                    <li class="{{ loop.first ? 'active' }}">
                        <a href="#" data-target="#{{ blockId }}"
                           data-toggle="tab">{{ index }}</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default"
                                    data-toggle="delete-block"
                                    data-target="#{{ blockId }}">
                                <i class="fa fa-close"></i></button>
                        </div>
                        <input type="hidden" name="{{ blockName }}" value="1" />
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content">
                <div class="empty-tabs">
                    <i class="fa fa-share fa-rotate-270" aria-hidden="true"></i>
                    Click to add a shared folder
                </div>
                {% for index, synced_folder in data.vm.synced_folder %}
                    {% include 'PuphpetBundle:vagrantfile-gce:synced-folder.html.twig' with {
                        'synced_folder': synced_folder,
                        'uniqid': index,
                        'active': loop.first ? true : false,
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="vagrantfile-gce-modal" tabindex="-1" role="dialog"
     aria-labelledby="vagrantfile-gce-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="vagrantfile-gce-modal-label">
                    Instructions for Google Compute Engine Deployment
                </h4>
            </div>
            <div class="modal-body">
                <h3>Google Compute Engine Instance</h3>

                <p>
                    Visit the <a href="https://console.developers.google.com/" target="_blank">Developers Console</a>
                    and make sure to enable the Google Compute Engine service for your project.
                    If prompted, review and agree to the terms of service.
                </p>
                <p>
                    While still in the Developers Console, go to <strong>API & AUTH -> Credentials</strong>
                    section and click the Create new Client ID button. In the pop-up dialog, select the
                    Service Account radio button and the click the Create Client ID button.
                </p>
                <p>
                    When prompted, select the Download private key button and make sure to save this file in a secure
                    and reliable location. This key file will be used to authorize all Vagrant commands available in
                    this plugin.
                </p>
                <p>
                    Still on the same page, find the newly created Service Account text block on the API Access page.
                    Record the Email address (it should end with @developer.gserviceaccount.com) associated with the
                    new Service Account you just created. You will need this email address and the location of the
                    private key file to properly configure this Vagrant plugin.
                </p>
                <p>
                    Then, you must go to <strong>Compute -> Compute Engine -> Metadata -> SSH KEYS</strong> and
                    add the public key you will be using below.
                </p>

                <h3>Installation Requirements</h3>

                <p>Run the following commands from your host's terminal (not within the VM):</p>

                <ul class="nav nav-pills">
                    <li class="active"><a href="#gce-instructions-mac" data-toggle="pill">Mac</a></li>
                    <li><a href="#gce-instructions-windows" data-toggle="pill">Windows</a></li>
                    <li><a href="#gce-instructions-linux" data-toggle="pill">Linux</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="gce-instructions-mac">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-google<br />
                            $ vagrant box add gce https://github.com/mitchellh/vagrant-google/raw/master/google.box
                        </code>
                    </div>
                    <div class="tab-pane" id="gce-instructions-windows">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-google<br />
                            $ vagrant box add gce https://github.com/mitchellh/vagrant-google/raw/master/google.box<br />
                        </code>

                        <div class="clearfix"></div>

                        <p>
                            You need rsync installed. Easiest way is to use Cygwin and install it through there.
                            Alternatively, you can
                            <a href="https://www.itefix.no/i2/content/cwrsync-free-edition" target="_blank">install rsync separately</a>
                            and add it to your PATH.
                        </p>
                    </div>
                    <div class="tab-pane" id="gce-instructions-linux">
                        <code class="col-xs-11 inline-instructions">
                            $ vagrant plugin install vagrant-google<br />
                            $ vagrant box add gce https://github.com/mitchellh/vagrant-google/raw/master/google.box<br />
                        </code>
                    </div>
                </div>

                <h3>Accessing Your VM</h3>

                <p>
                    To access your VM after running <code>$ vagrant up</code>, type
                    <code>$ vagrant ssh-config</code> to get the IP address assigned to the server you created,
                    and add the IP address to your computer's hosts file. Type <code>$ vagrant ssh</code> to
                    be immediately connected via SSH to your new server!
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
